/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import TabNavigator from 'react-native-tab-navigator';

import Home from './src/components/tabs/Home';
import Search from './src/components/tabs/Search';
import ShopCar from './src/components/tabs/ShopCar';
import Me from './src/components/tabs/Me';

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      selectedTab: 'home'
    }
  }
  render(){
    return <View style={styles.container}>
      {/*底部的tab*/}
      <TabNavigator>
        
        {/*home*/}
        <TabNavigator.Item
          selected={this.state.selectedTab === 'home'}
          title="Home"
          renderIcon={()=><Icon name="home" size={25} color="gray" />}
          renderSelectedIcon={()=><Icon name="home" size={25} color="#0079FF" />}
          onPress={() => this.setState({ selectedTab: 'home' })}>
          <Home></Home>
        </TabNavigator.Item>
        
        {/*搜索*/}
        <TabNavigator.Item
          selected={this.state.selectedTab === 'search'}
          title="搜索"
          renderIcon={()=><Icon name="search" size={25} color="gray" />}
          renderSelectedIcon={()=><Icon name="search" size={25} color="#0079FF" />}
          onPress={() => this.setState({ selectedTab: 'search' })}>
          <Search></Search>
        </TabNavigator.Item>
        
        {/*购物*/}
        <TabNavigator.Item
          selected={this.state.selectedTab === 'shopCar'}
          title="购物"
          renderIcon={()=><Icon name="shopping-cart" size={25} color="gray" />}
          renderSelectedIcon={()=><Icon name="shopping-cart" size={25} color="#0079FF" />}
          badgeText="0"
          onPress={() => this.setState({ selectedTab: 'shopCar' })}>
          <ShopCar></ShopCar>
        </TabNavigator.Item>
        
        {/*me*/}
        <TabNavigator.Item
          selected={this.state.selectedTab === 'me'}
          title="Me"
          renderIcon={()=><Icon name="user" size={25} color="red" />}
          renderSelectedIcon={()=><Icon name="user-o" size={25} color="#0079FF" />}
          onPress={() => this.setState({ selectedTab: 'me' })}>
          <Me></Me>
        </TabNavigator.Item>
      </TabNavigator>
    </View>
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1
  }
});

export default App;
